<template>
    <div id="container">
      <div id="viewDiv"></div>
      <el-main style="width:auto;position:absolute;left:0px; top:0px;width:auto;background-color:white">
        <span>ID</span><el-input v-model="attributes.objectid" :disabled="if_disabled"></el-input><br/>
        <span>名称</span><el-input v-model="attributes.name" :disabled="if_disabled"></el-input><br/>
        <span>地址</span><el-input v-model="attributes.address" :disabled="if_disabled"></el-input><br/>
        <el-main style="text-align:center;">
          <el-button @click="重置" :disabled="if_disabled">取消</el-button>
          <el-button @click="启用或停用编辑" :disabled="编辑_disabled">{{启用编辑按钮文本}}</el-button>
          <el-button @click="确定" :disabled="if_disabled">确定</el-button>
        </el-main>
      </el-main>
      <div style="position:absolute;width:180px;height:30px;" :style="{top:top,left:left,visibility:visibility}" >
        <el-select v-model="select"  placeholder="请根据名称选择要素" tag-type="success" @change="change">
          <el-option v-for="item in options" :value="item" :label="item" :key="item"></el-option>
        </el-select>
      </div>
    </div>
</template>

<script setup>
/*整体思路
  1:view对象的click事件如果点击到了指定的要素图层的要素,则获取该要素的指定属性值并显示在相应的组件中
  2:点击确定按钮,将用户修改的各项属性,更新到服务中对应要素的属性中
*/
import {ref} from 'vue'
import * as 天地图 from '../天地图'
import {ElNotification} from 'element-plus'
import {onMounted} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
var map,view
const 编辑_disabled=ref(true)
const 启用或停用编辑=()=>{
  启用编辑按钮文本.value=启用编辑按钮文本.value==='启用编辑'?'停用编辑':'启用编辑'
  if_disabled.value=if_disabled.value===true?false:true
}
const 启用编辑按钮文本=ref('启用编辑')
const if_disabled=ref(true)
const select=ref()
const options=ref([])
const top=ref()
const left=ref()
const visibility=ref("hidden")
var change=()=>{}
const attributes=ref({//创建一个变量用于存储并显示指定要素的指定属性,从点击到的图形中获取相应属性
  objectid:null,
  name:null,
  address:null
})
const 重置=()=>{
  for(let key in attributes.value){ 
    attributes.value[key]=null
  }
  view.graphics.removeAll()
  编辑_disabled.value=true
  if_disabled.value=true
  启用编辑按钮文本.value="启用编辑"
  select.value=null;options.value=[];top.value="";left.value="";visibility.value="hidden"
}
const 确定=()=>{//执行属性修改,弹出提示框,禁用取消和确定按钮,重置编辑按钮的文本
  要素图层.applyEdits({
    updateFeatures:[
      {
        attributes:attributes.value
      }
    ]
  })
  ElNotification({
    type:"success",
    title:"提示!",
    message:'修改成功',
    position:"top-left",
    offset:350
  })
  if_disabled.value=true
  启用编辑按钮文本.value="启用编辑"
}
var 要素图层 = new FeatureLayer({
  url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
  //核心属性:"objectid","name","address","一级类","二级类"
  title:"AOI图层",//图层标题,显示在图例中
  outFields:["*"],
  renderer:{
    type:"simple",
    symbol:{
      type:"simple-fill",
      color:[0,0,0,0.2],
      outline:{
        color:[255,255,255,0.8],
        width:0.5
      }
    }
  }
})
map=new Map({
  basemap:{
    baseLayers:天地图.天地图矢量
  },
  layers: [要素图层]
})
onMounted(()=>{//钩子函数
  view = new MapView({//创建视图对象
    map: map,  container: "viewDiv",
    scale:5000, center: [120.4, 36.1],
    constraints:{
        minScale:500000,
        maxScale:1800,
        rotationEnabled:false
    }
  })
  view.ui.remove(["zoom","attribution"]);
  view.on("click", function(event) {//view对象"click"事件的回调函数
    view.hitTest(event).then(function(response) {//执行hitTest方法并返回点击到的内容的返回结果
      重置()
      var graphics=response?.results.map((item)=>{//获取点击到的要素图层的图形的集合
        if(item.type==="graphic" && item.graphic.layer===要素图层){
          return item.graphic
        }
      })
      var graphics_view=response?.results.map((item)=>{//获取点击到的view.graphics图层的图形的集合
        if(item.type==="graphic" && item.graphic.layer===view.graphics){
         return item.graphic
        }
      })
      if(!graphics_view[0] && graphics[0]){//如果没有返回view.graphics图层的图形且返回了要素图层图层的图形,执行下面代码
        if(graphics.length>1){//如果点击到了要素图层的多个图形
          var point=view.toScreen(event.mapPoint)
          top.value=point.y-30+'px'
          left.value=point.x+10+'px'
          visibility.value="visible"
          for(let item of graphics){
            options.value.push(item.attributes.name)
          }
          change=()=>{
            visibility.value="hidden"
            for(let item of graphics){
              if(select.value===item.attributes.name){
                view.graphics.add({//将点击到的要素图层的图形集合的第一个图形添加到视图并以高亮样式显示在原图形的上方
                geometry:item.geometry,
                symbol:{
                  type:'simple-fill',
                  color:[115,223,255,0.3],
                  size:"10px",
                  outline:{
                      color:[115, 223, 255],
                      width:2
                  }
                }
              })//👇获取原图形的属性并为attributes的各项成员赋值
              attributes.value.objectid=item.attributes.objectid
              attributes.value.name=item.attributes.name
              attributes.value.address=item.attributes.address
              编辑_disabled.value=false//启用编辑按钮
              }
            }
          }
        }else{//如果仅点击到了一个要素图层的图形,执行下面的代码
          view.graphics.add({//将点击到的要素图层的图形集合的第一个图形添加到视图并以高亮样式显示在原图形的上方
            geometry:graphics[0].geometry,
            symbol:{
              type:'simple-fill',
              color:[115,223,255,0.3],
              size:"10px",
              outline:{
                  color:[115, 223, 255],
                  width:2
              }
            }
          })//👇获取原图形的属性并为attributes的各项成员赋值
          attributes.value.objectid=response.results[0].graphic.attributes.objectid
          attributes.value.name=response.results[0].graphic.attributes.name
          attributes.value.address=response.results[0].graphic.attributes.address
          编辑_disabled.value=false//启用编辑按钮
        }
      }
    })
  })
})//onMounted()结尾
</script>

<style scoped>
  #viewDiv,#container{
    height:100%;width:100%;padding:0;margin:0;
  }
</style>
  